<template>
  <div class="center_div">
    <el-table :data="meetingList" style="margin-top: 10px"  v-loading="tableLoading" element-loading-text="Loading">
      <el-table-column prop="roomnum" label="会议室编号" min-width="90" align="center">
        <template slot-scope="scope">
          <el-tag type="primary">{{scope.row.roomnum}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="roomname" label="会议室名" min-width="90"></el-table-column>
      <el-table-column prop="capacity" label="容量" min-width="90" align="center"></el-table-column>
      <el-table-column label="会议室状态" min-width="90"  align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1 " type="warning">维修中</el-tag>
          <el-tag v-if="scope.row.status === 0 " type="success">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" min-width="120" :show-overflow-tooltip="true"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "amuse-grant",
    data() {
      return{
        meetingList:  [
          {roomid: 1 ,roomnum: 112, roomname: '公共会议室', capacity: 15, status: 0, description: '公共使用的会议室'},
          {roomid: 2 ,roomnum: 113, roomname: '专用会议室', capacity: 5, status: 0, description: '公共使用的会议室'},
          {roomid: 3 ,roomnum: 244, roomname: '约会会议室', capacity: 4, status: 1, description: '公共使用的会议室'},
          {roomid: 4 ,roomnum: 245, roomname: '喝茶会议室', capacity: 8, status: 1, description: '公共使用的会议室'},
          {roomid: 5 ,roomnum: 301, roomname: '唱歌会议室', capacity: 12, status: 0, description: '公共使用的会议室'}
        ],
        tableLoading: false
      }
    },
    created() {
      this.fetchMeetingList()
    },
    methods: {
      async fetchMeetingList(){
        this.tableLoading = true
          let {code ,data ,msg} = await this.$post('/meetingrooms')
          if(code === 200) {
              this.meetingList = data
          }else {
              this.$message.error(msg)
          }
          this.tableLoading = false
      }
    }
  }
</script>

<style >
  .center_div{
    width: 60%;
    margin:0 auto;
    margin-bottom: 50px;
  }
</style>